<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>105任务</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    
    <style type="text/css">
            h2{
                color: red ;
            }   
    </style>
</head>
<body>
        <div class="navbar  navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">S.  E.</a>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                            <li><a href="#introduction"><span class="glyphicon glyphicon-user"></span> Introduction</a></li>
                            <li><a href="#eduction"><span class="glyphicon glyphicon-flag"></span> Education</a></li>
                            <li><a href="#experiences"><span class="glyphicon glyphicon-film"></span> Experiences</a></li>                            
                            <li><a href="#contact"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
                            <li><a href="#skills"><span class="glyphicon glyphicon-flash"></span> Skills</a></li>
                            <li><a href="#languages"><span class="glyphicon glyphicon-globe"></span> Languanges</a></li>
                            <li><a href="#habbies"><span class="glyphicon glyphicon-headphones"></span> Habbies</a></li>
                        </ul>
                    </div><!-- /.nav-collapse -->
                </div><!-- /.container -->
            </div>
    <div class="container" style="padding-top:75px">
        <div class="row">
            <div class="col-sm-12">
                    <img src="img/xinnan.jpg" alt="辛难" class="img-circle center-block"  width="100" height="100">
                    <div class="container">
                        <h1 class="text-center ">HELLO,</h1>
                        <h3 class=" text-center">NAME IS <strong style="color:brown">S.E.</strong> AND THIS IS MY RESUME/CV</h3>
                    </div>
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-xs-12 col-sm-8">
                            <div class="row">
                                    <div class="col-xs-12" >
                                            <h2><a name="introduction"></a>INTRODUCTION</h2>
                                            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                                                Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum 
                                                sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.</p>
                                    </div>
                                    <div class="col-xs-12" >
                                            <h2><a name="eduction"></a>EDUCTIOON</h2>
                                            <table class="table table-striped">
                                                    <tbody>
                                                      <tr>
                                                        <td>1990</td>
                                                        <td><strong>was born in Katowice</strong> <br/>
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, exercitationem, totam, dolores iste dolore est aut modi.</td>
                                                      </tr>
                                                      <tr>
                                                        <td>2005</td>
                                                        <td><strong>school specializing in artistic</strong> <br/>
                                                                Eos, explicabo, nam, tenetur et ab eius deserunt aspernatur ipsum ducimus quibusdam quis voluptatibus.</td>
                                                      </tr>
                                                      <tr>
                                                          <td>2009</td>
                                                          <td><strong>level graduation in Graphic Design</strong> <br/>
                                                                Aspernatur, mollitia, quos maxime eius suscipit sed beatae ducimus quaerat quibusdam perferendis? Iusto, quibusdam asperiores unde repellat.</td>
                                                      </tr>
                                                      <tr>
                                                            <td>2012</td>
                                                            <td><strong>Second level graduation in Graphic Design</strong> <br/>
                                                                Ducimus, aliquam tempore autem itaque et accusantium!</td>
                                                        </tr>
                                                    </tbody>
                                                  </table>
                                    </div>
                                    <div class="col-xs-12">
                                            <h2><a name="experiences"></a>EXPERIENCES</h2>
                                            <table class="table table-striped">
                                                    <tbody>
                                                      <tr>
                                                        <td><strong>Google</strong><br/>2013-2015</td>
                                                        <td><strong>Front-end developer / php programmer</strong> <br/>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, et, illum perferendis veritatis velit sunt similique qui magni totam harum tempore eius laboriosam accusantium necessitatibus voluptatum? Enim, itaque dignissimos quia.</td>
                                                      </tr>
                                                      <tr>
                                                        <td><strong>Twitter</strong><br/>2015-new</td>
                                                        <td><strong>Web Developer</strong> <br/>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nihil sit nemo voluptatem praesentium. Quia, qui facere consectetur libero asperiores fugiat consequuntur deserunt culpa repudiandae sed quidem voluptas explicabo soluta.</td>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                    </div>
                            </div>
                    </div>

                    <div class="col-xs-12 col-sm-4">
                        <div class="row">
                            <div class="col-xs-12">
                                    <h2><a name="contact"></a>CONTACT</h2>
                                    <table class="table">
                                            <tbody>
                                                <tr>
                                                    <td><span class="glyphicon glyphicon-earphone"></span></td>
                                                    <td>777-777-777</td>
                                                </tr>
                                                <tr>
                                                    <td><span class="glyphicon glyphicon-envelope"></span></td>
                                                    <td>z839187405@qq.com</td>
                                                </tr>
                                                <tr>
                                                    <td><span class="glyphicon glyphicon-envelope"></span></td>
                                                    <td>Twitter</td>
                                                </tr>
                                                <tr>
                                                    <td><span class="glyphicon glyphicon-envelope"></span></td>
                                                    <td>Facebook</td>
                                                </tr>
                                            </tbody>
                                    </table>
                            </div>
                            <div class="col-xs-12" >
                                    <h2><a name="skills"></a>SKILLS</h2>
                                    <ul class="list-unstyled">
                                            <li>Java
                                                <div class="progress progress-striped active">
                                                    <div class="progress-bar progress-bar-success" role="progressbar"
                                                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                         style="width: 90%;">
                                                    </div>
                                                </div>
                                            </li>
                                            <li>CSS
                                                <div class="progress progress-striped active">
                                                    <div class="progress-bar progress-bar-info" role="progressbar"
                                                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                         style="width: 80%;">
                                                    </div>
                                                </div>
                                            </li>
                                            <li>jQuery
                                                <div class="progress progress-striped active">
                                                        <div class="progress-bar progress-bar-warning" role="progressbar"
                                                                aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                                style="width: 66%;">
                                                        </div>
                                                    </div>
                                            </li>
                                            <li>PHP
                                                <div class="progress progress-striped active">
                                                        <div class="progress-bar progress-bar-danger" role="progressbar"
                                                                aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                                style="width: 40%;">
                                                        </div>
                                                    </div>
                                            </li>
                                          </ul>
                            </div>
                            <div class="col-xs-12">
                                    <h2><a name="languages"></a>LANGUAGES</h2>
                                    <table class="table">
                                        <tbody>
                                            <tr>
                                                <td>Chinese</td>
                                                <td><span class="glyphicon glyphicon-star" style="color:red"></span>
                                                    <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                    <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                    <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                    <span class="glyphicon glyphicon-star" style="color:red"></span></td>
                                            </tr>
                                            <tr>
                                                    <td>English</td>
                                                    <td><span class="glyphicon glyphicon-star" style="color:red"></span>
                                                        <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                        <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                        <span class="glyphicon glyphicon-star-empty" style="color:red"></span>
                                                        <span class="glyphicon glyphicon-star-empty" style="color:red"></span></td>
                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                            <div class="col-xs-12">
                                    <h2><a name="habbies"></a>HABBIES</h2>
                                    <span class="label label-primary">
                                        <span class="glyphicon glyphicon-heart"></span> Eating</span>

                                    <span class="label label-success">
                                        <span class="glyphicon glyphicon-heart"></span> Baskteball</span>
                                            
                                    <span class="label label-danger">
                                        <span class="glyphicon glyphicon-heart"></span> LOL</span>
                                            
                            </div>
                        </div>
                    </div>


                </div>  
            </div>
        </div>
    </div>
</body>
</html>